<template>
<div class="tc-center fl">
    <ul class="clearfix uiTab9 j_uiTab9">
        <li :class="{'uiTab9-active':subIndex == index}" class="relative" :title="item.name" @click="subSwitch(index),setTwoToThreeInfo({...pointsList[subIndex-1],'currentIndex': index})" v-for="(item, index) of title" :key="index">{{item.name | slice(0,3)}}
            <span class="abnormalButton" v-if="item.flag"></span>
            <!-- <span type="text/x-template" id="tipnotes" :v-show="show">
                <slot :text="redval">.</slot>
            </span> -->
        </li>
    </ul>
    <div id="j-tc-center-content">
        <!-- 状态 state -->
        <div class="uiTab9Con" v-if="subIndex == 0">
            <rx-state></rx-state>
        </div>
        <!-- 信息 information -->
        <div class="uiTab9Con" v-if="subIndex !== 0">
            <rx-information :pointsInfo="pointsList[subIndex-1]"></rx-information>
        </div>
    </div>
</div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'

import { getPointByPro } from '../../../branches/Department/Resources/Api/index'

// 注: 所有的大组件已 rx-xxx 命名, 不要使用此示例文件命名，可保留作为参考
import rxState from './state'
import rxInformation from './information'

export default {
    components: {
        rxState,
        rxInformation
    },
    data () {
        return {
            title: ['状态'],
            subIndex: 0,
            pointsList: [], // 点位信息
            show: true
        }
    },
    created () {
        this._getPointByProFn()
    },
    computed: {
        ...mapGetters(['leftInfo', 'updatePlate', 'twoToThreeInfo'])
        // show: {
        //     if ('#tipnotes'.item.point_state === 0 && pointsList[index].state === 0) {
        //         show == this.show
        //     } else if (pointsList[index].get('point_state') === 0 && (pointsList[subIndex-1].get('state') === 1 || pointsList[subindex] === -1)) {
        //         show = !this.show
        //     }
        // }
    },
    methods: {
        ...mapMutations({
            setTwoToThreeInfo: `SET_TWO_TO_THREE_INFO`
        }),
        subSwitch (index) {
            this.subIndex = index
            // 关闭弹窗
            this.$router.push(this.$route.matched[1].path)
        },
        // 按项目查询点位
        _getPointByProFn () {
            this.subIndex = 0
            this.title = [
                {'flag': false, 'name': '状态'}
            ]
            let params = {
                order_no: this.leftInfo.order_no
            }
            getPointByPro(params).then((result) => {
                if (result.data.StatusCode === 0) {
                    this.pointsList = result.data.Body.orderList
                    result.data.Body.orderList.forEach((item, index) => {
                        if (item.name === null) {
                            let object = {}
                            object.flag = false
                            object.name = '点位' + (index + 1)
                            this.title.push(object)
                        } else {
                            let object = {}
                            if (Number(item.state) !== 0 && Number(item.point_state) === 0) {
                                object.flag = true
                            } else {
                                object.flag = false
                            }
                            object.name = item.name
                            this.title.push(object)
                        }
                    })
                    this.$router.push(this.$route.matched[1].path)
                }
            }).catch((err) => {
                console.log(`按项目查询点位接口错误,错误内容${err}`)
            })
        }
    },
    watch: {
        leftInfo () {
            this._getPointByProFn()
        },
        updatePlate () {
            // const currentIndex = this.twoToThreeInfo.currentIndex
            // if (currentIndex) {
            //     this.subIndex = currentIndex
            // }
            this._getPointByProFn()
            // this.setTwoToThreeInfo({ ...this.pointsList[this.subIndex - 1], 'currentIndex': this.subIndex })
        }
    }
}
</script>
<style lang="scss" scoped>
    .abnormalButton {
        width:5px;
        height:5px;
        border-radius: 50%;
        background: red;
        position:absolute;
        left: 5px;
        bottom: 20px;
    }
</style>
